/**
 * MapEditShow
 * Leaflet & Draw & Measure页面
 */
import React, { Component } from 'react';
import { Grid, Button } from 'semantic-ui-react';
import MapCrumb from '../../../menu/crumb/MapCrumb';
import { Map, TileLayer, FeatureGroup, withLeaflet } from 'react-leaflet';

import L from "leaflet";
import { EditControl } from 'react-leaflet-draw';
import MeasureControlDefault from 'react-leaflet-measure';
import PrintControlDefault from 'react-leaflet-easyprint';

import './MapEditShow.css';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/marker-icon.png',
    iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/marker-icon.png',
    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/images/marker-shadow.png',
});

class MapEditShow extends Component{

    _onEdited = (e) => {
        let numEdited = 0;
        e.layers.eachLayer( (layer) => {
          numEdited += 1;
        });
        console.log('_onEdited: edited ' + numEdited + ' layers', e);
        this._onChange();
    }
    
    _onCreated = (e) => {
        let type = e.layerType;
        // let layer = e.layer;
        if (type === 'marker') {
          // Do marker specific actions
          console.log("_onCreated: marker created", e);
        }
        else {
          console.log("_onCreated: something else created:", type, e);
        }
        // Do whatever else you need to. (save to db; etc)
        this._onChange();
    }
    
    _onDeleted = (e) => {
        let numDeleted = 0;
        e.layers.eachLayer( (layer) => {
          numDeleted += 1;
        });
        console.log('onDeleted: removed '+  numDeleted + 'layers', e);
        this._onChange();
    }
    
    _onMounted = (drawControl) => {
        console.log('_onMounted', drawControl);
    }
    
    _onEditStart = (e) => {
        console.log('_onEditStart', e);
    }
    
    _onEditStop = (e) => {
        console.log('_onEditStop', e);
    }
    
    _onDeleteStart = (e) => {
        console.log('_onDeleteStart', e);
    }
    
    _onDeleteStop = (e) => {
        console.log('_onDeleteStop', e);
    }
    
    render() {
        const MeasureControl = withLeaflet(MeasureControlDefault);
        const measureOptions = {
            position: 'bottomright',
            primaryLengthUnit: 'meters',
            secondaryLengthUnit: 'kilometers',
            primaryAreaUnit: 'sqmeters',
            secondaryAreaUnit: 'acres',
            activeColor: '#db4a29',
            completedColor: '#9b2d14'
        };
        const PrintControl = withLeaflet(PrintControlDefault);

        return (
            <Grid>
                <Grid.Row>
                    <Grid.Column>
                        <MapCrumb></MapCrumb>
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column>
                        <Map style={{ width: '100%', height: '550px' }} center={[37.8189, -122.4786]} zoom={13} zoomControl={true}>
                            <TileLayer attribution='&copy;OpenStreetMap contributors' url="http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"/>
                            <FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(reactFGref);} }>
                                <EditControl
                                    position='topright'
                                    onEdited={this._onEdited}
                                    onCreated={this._onCreated}
                                    onDeleted={this._onDeleted}
                                    onMounted={this._onMounted}
                                    onEditStart={this._onEditStart}
                                    onEditStop={this._onEditStop}
                                    onDeleteStart={this._onDeleteStart}
                                    onDeleteStop={this._onDeleteStop}
                                    draw={{
                                        rectangle: true,
                                        polyline: {
                                            shapeOptions: {
                                                color: '#db4a29',
                                                weight: 3
                                            }
                                        },
                                        polygon: {
                                            shapeOptions: {
                                                color: '#db4a29',
                                                weight: 3
                                            } 
                                        }
                                    }} />
                            </FeatureGroup>
                            <MeasureControl {...measureOptions}></MeasureControl> */}
                            <PrintControl ref={(ref) => { this.printControl = ref; }} position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} />
                            <PrintControl position="topleft" sizeModes={['Current', 'A4Portrait', 'A4Landscape']} hideControlContainer={false} title="Export as PNG" exportOnly /> 
                        </Map>
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column>
                        <Button primary onClick={this.handleClick.bind(this)} >Update</Button>
                    </Grid.Column>
                </Grid.Row>
            </Grid>
        );
    }

    _editableFG = null

    _onFeatureGroupReady = (reactFGref) => {
        // populate the leaflet FeatureGroup with the geoJson layers
        let leafletGeoJSON = new L.GeoJSON();
        let leafletFG = reactFGref.leafletElement;

        leafletGeoJSON.eachLayer( (layer) => {
            leafletFG.addLayer(layer);
        });

        // store the ref for future access to content
        this._editableFG = reactFGref;
    }

    _onChange = () => {
        // this._editableFG contains the edited geometry, which can be manipulated through the leaflet API
        const { onChange } = this.props;

        if (!this._editableFG || !onChange) {
            return;
        }
        const geojsonData = this._editableFG.leafletElement.toGeoJSON();
        onChange(geojsonData);
    }

    handleClick(e) {
        const geojson = this._editableFG.leafletElement.toGeoJSON();
        console.log(geojson);
    }
}

export default MapEditShow;